<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>事件与方法</title>
	<!-- <script src="https://unpkg.com/vue@next"></script> -->
	<script src="js/vue.global.js"></script>
	<link rel="stylesheet" href="css/com.css">
</head>
<body>
	
<div id="app" class="demo">
	<button v-on:click="fn()">点击</button>
	<!-- 如果不需要传参，可以省略括号 -->
	<button v-on:click="fn">点击2</button>
	<!-- 缩写，简写 -->
	<button @click="fn">点击3</button>
	<!-- 带参数的 -->
	<button @click="hello('8866')">点击4</button>
	<p>{{ message }}</p>
</div>

</body>
<script>
const HelloVueApp = {
	data() {
		return {
			message: 'Hello Vue!!'
		}
	},
	methods:{
		fn(){
			this.message = "欢迎来到HTML中文网。";
		},
		hello(par){
			this.message = "参数值为：" + par;
		}
	}
}
Vue.createApp(HelloVueApp).mount('#app');

</script>

</html>